<template>
	<view style="margin-top: 20rpx;">

		<view style="width: 100%; background-color: #FFF7F0;border: 1px solid #FFF7F0;">
			<view class="bubble-container">
				<view class="bubble_title-box">
					<h1 class="bubble_title">这份挚礼送给？</h1>
				</view>
				<view class="bubble_Bubble_qipao">
					<view v-for="(brand, index) in brands" :key="index" class="bubble_bubble"
						:class="{ bubble_active: brand.isActive }" :style="{
							top: brand.top + 'rpx',
							left: brand.left + 'rpx',
							width: brand.size + 'rpx',
							height: brand.size + 'rpx',
							backgroundColor: brand.bgColor,
							animationDelay: brand.delay + 's',
							animationDuration: brand.duration + 's',
							transition: 'all 0.3s ease-in-out, background-color 0.5s ease',
						}" @click="handleBubbleClick(index, brand)">
						<view class="bubble_brand-content">
							<view :class="[
								'bubble_brand-name',
								brand.textColor,
								{ 'text-white': brand.isActive },
							]" :style="{
								fontSize: brand.fontSize + 'rpx',
								fontWeight: brand.fontWeight || 400,
							}">{{ brand.name }}</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="money_price-container">
			<view class="money_price-title">这份挚礼的价值?</view>
			<view class="money_price-bubbles">
				<view v-for="(price, index) in prices" :key="index" class="money_price-bubble"
					:class="{ 'money_price-active': price.isActive }" @click="handlePriceClick(index)">
					<text>{{ price.range }}</text>
				</view>
			</view>
		</view>


	</view>
</template>

<script>
export default {
	data() {
		return {
			brands: [
			{
      id: "18",
      name: "孩童",
      top: 20,
      left: -20,
      size: 132,
      fontSize: 32,
      textColor: "text-black",
      bgColor: "rgba(255, 244, 230, 0.9)",
      delay: 0,
      duration: 5,
      isActive: false,
      image: "https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/tempImage/17356471086773df841b48a.png",
    },
    {
      id: "20",
      name: "老人",
      top: 60,
      left: 220,
      size: 132,
      fontSize: 28,
      textColor: "text-black",
      bgColor: "rgba(248, 240, 229, 0.9)",
      delay: 0.5,
      duration: 6,
      isActive: false,
      image: "https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/tempImage/17356471376773dfa1b0ed2.png",

    },
    {
      id: "22",
      name: "其他",
      top: 90,
      left: 400,
      size: 116,
      fontSize: 28,
      textColor: "text-black",
      bgColor: "rgba(232, 244, 248, 0.9)",
      delay: 1,
      duration: 5.5,
      isActive: false,
      image: "https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/tempImage/17356471536773dfb111cf6.png",

    },
    {
      id: "24",
      name: "合作伙伴",
      top: -10,
      left: 560,
      size: 140,
      fontSize: 28,
      textColor: "text-black",
      bgColor: "rgba(240, 248, 237, 0.9)",
      delay: 1.5,
      duration: 5.8,
      isActive: false,
      image: "https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/tempImage/17356471666773dfbed745e.png",

    },
    {
      id: "19",
      name: "爱人",
      top: 150,
      left: 52,
      size: 168,
      fontSize: 48,
      textColor: "text-black",
      bgColor: "rgba(255, 240, 240, 0.9)",
      delay: 0.8,
      duration: 6.2,
      isActive: false,
      image: "https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/tempImage/17356471806773dfcc13d97.png",

    },
    {
      id: "25",
      name: "亲戚",
      top: 140,
      left: 656,
      size: 132,
      
      fontSize: 28,
      textColor: "text-black",
      fontWeight: 500,
      bgColor: "rgba(245, 230, 255, 0.9)",
      delay: 1.2,
      duration: 5.7,
      isActive: false,
      image: "https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/tempImage/17356471936773dfd9b8278.png",

    },
    {
      id: "21",
      name: "同事",
      top: 300,
      left: 200,
      size: 96,
      fontSize: 28,
      textColor: "text-black",
      bgColor: "rgba(255, 235, 205, 0.9)",
      delay: 0.3,
      duration: 5.9,
      isActive: false,
      image: "https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/tempImage/17356472076773dfe72882f.png",

    },
    {
      id: "23",
      name: "领导",
      top: 260,
      left: 360,
      size: 116,
      fontSize: 24,
      textColor: "text-black",
      bgColor: "rgba(230, 255, 250, 0.9)",
      delay: 1.7,
      duration: 5.4,
      isActive: false,
      image: "https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/tempImage/17356472206773dff40e47c.png",

    },
    {
      id: "26",
      name: "好友",
      top: 220,
      left: 526,
      size: 130,
      fontSize: 24,
      textColor: "text-black",
      bgColor: "rgba(255, 244, 230, 0.9)",
      delay: 0.6,
      duration: 6.1,
      isActive: false,
      image: "https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/tempImage/17356472396773e007147f4.png",
    },
			],
			prices: [
				{ range: "100元以下", isActive: false },
				{ range: "100-200元", isActive: false },
				{ range: "200-300元", isActive: false },
				{ range: "300-400元", isActive: false },
				{ range: "500-800元", isActive: false },
				{ range: "800元以上", isActive: false },
			],
		}
	},
	onLoad() {

	},
	methods: {
		handleBubbleClick(index, item) {
			this.brands = this.brands.map((brand, i) => ({
				...brand,
				isActive: i === index,
			}));

			// 获取选中的气泡名称
			const selectedBrand = this.brands[index].name;

			// 构建泡数据数组，将中的设为active
			const bubbleItems = [
				{ text: "爱人", active: selectedBrand === "爱人", id: "19" ,image: "https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/tempImage/17356471806773dfcc13d97.png",},
				{ text: "老人", active: selectedBrand === "老人", id: "20" ,image: "https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/tempImage/17356471376773dfa1b0ed2.png",},
				{ text: "亲戚", active: selectedBrand === "亲戚", id: "25" ,image: "https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/tempImage/17356471936773dfd9b8278.png",},
				{ text: "好友", active: selectedBrand === "好友", id: "26"	, image: "https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/tempImage/17356472396773e007147f4.png",},
				{ text: "孩童", active: selectedBrand === "孩童", id: "18" ,    image: "https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/tempImage/17356471086773df841b48a.png",},
				{ text: "合作伙伴", active: selectedBrand === "合作伙伴", id: "24" ,image: "https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/tempImage/17356471666773dfbed745e.png",},
				{ text: "领导", active: selectedBrand === "领导", id: "23" ,image: "https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/tempImage/17356472206773dff40e47c.png",},
				{ text: "同事", active: selectedBrand === "同事", id: "21" ,image: "https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/tempImage/17356472076773dfe72882f.png",},
				{ text: "其他", active: selectedBrand === "其他", id: "22" ,image: "https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/tempImage/17356471536773dfb111cf6.png",}
			];


			// 传递气泡数据 
			// 将数据编码并传递
			const params = encodeURIComponent(JSON.stringify(bubbleItems));
			uni.navigateTo({
				url: `/pages/mer/tabbar/specialDetails/obj_details?bubbleItems=${params}&id=${item.id}&title=${selectedBrand}&image=${item.image}`
			});
		},
		handlePriceClick(index) {
			this.prices = this.prices.map((price, i) => ({
				...price,
				isActive: i === index,
			}));

			// 添加跳转逻辑
			uni.navigateTo({
				url: `/pages/mer/tabbar/specialDetails/moeny_details?priceRange=${this.prices[index].range}&selectedIndex=${index}`
			});
		},
	}
}
</script>

<style lang="scss" scoped>
.bubble_Bubble_qipao {
	position: absolute;
	top: 75rpx;
	left: 50%;
	transform: translateX(-50%);
	width: 100%;
	max-width: 750rpx; // 设置最大宽度
	background-color: #FFF7F0;
}

.bubble-container {
	position: relative;
	width: 100%;
	height: 450rpx;
	background-color: #FFF7F0;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.bubble_title-box {
	text-align: center;
	padding: 20rpx;
	border-radius: 10rpx;
	background-color: #FFF7F0;
}

.bubble_title {
	color: #e67624;
	font-size: 48rpx;
	font-weight: 600;
}

.bubble_subtitle {
	color: #3d3d3d;
	font-size: 28rpx;
	padding: 10rpx;
}

.bubble_bubble {
	position: absolute;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow:
		inset -8rpx -8rpx 12rpx rgba(0, 0, 0, 0.1),
		inset 8rpx 8rpx 12rpx rgba(255, 255, 255, 0.8),
		4rpx 4rpx 10rpx rgba(0, 0, 0, 0.15);
	transition: all 0.3s ease;
	animation: float 3s ease-in-out infinite;
	transform-origin: center;
	transform-style: preserve-3d;
	perspective: 1000rpx;

	&:hover {
		transform: translateY(-3rpx) translateZ(20rpx);
		box-shadow:
			inset -8rpx -8rpx 12rpx rgba(0, 0, 0, 0.1),
			inset 8rpx 8rpx 12rpx rgba(255, 255, 255, 0.8),
			8rpx 8rpx 20rpx rgba(0, 0, 0, 0.2);
	}
}

.bubble_active {
	background: radial-gradient(circle at 30% 30%,
			#fbeee5 0%,
			#F39800 60%,
			#F39800 100%) !important;
	box-shadow:
		inset -8rpx -8rpx 12rpx rgba(0, 0, 0, 0.2),
		inset 8rpx 8rpx 12rpx rgba(255, 255, 255, 0.1),
		4rpx 4rpx 15rpx rgba(230, 118, 36, 0.4);
	transform: translateZ(30rpx);
}

.text-white {
	color: #ffffff !important;
}

@keyframes float {

	0%,
	100% {
		transform: translateY(0) translateZ(0) rotateX(0deg);
	}

	50% {
		transform: translateY(-30rpx) translateZ(20rpx) rotateX(5deg);
	}
}

.bubble_brand-content {
	text-align: center;
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.bubble_brand-name {
	line-height: 1.3;
	margin-bottom: 2rpx;
	text-shadow: 1rpx 1rpx 2rpx rgba(0, 0, 0, 0.1);
	transform: translateZ(10rpx);
}

.text-green {
	color: #00843d;
}

.text-#F4DCC8 {
	color: #e60012;
}

.text-blue {
	color: #0066cc;
}

.text-cyan {
	color: #00a0e9;
}

.text-black {
	color: #333333;
}

.text-orange {
	color: #ff6600;
}

@media screen and (max-width: 375px) {
	.bubble_Bubble_qipao {
		transform: translateX(-50%) scale(0.9);
	}
}

@media screen and (max-width: 320px) {
	.bubble_Bubble_qipao {
		transform: translateX(-50%) scale(0.8);
	}
}

/* iPad Media Query */
@media screen and (min-width: 768px) and (max-width: 1024px) {
	.bubble_Bubble_qipao {
		transform: translateX(-50%) scale(1.5);
		top: 150rpx;
	}

	.bubble_bubble {
		transform-origin: center;
	}

	.bubble_title {
		font-size: 72rpx;
	}

	.bubble_subtitle {
		font-size: 36rpx;
	}
}
</style>


<style lang="scss" scoped>
.money_price-container {
	padding: 30rpx;
	background-color: #FFF7F0;
}

.money_price-title {
	text-align: center;
	font-size: 48rpx;
	color: #e67624;
	font-weight: bold;
	margin-bottom: 40rpx;
}

.money_price-bubbles {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 30rpx;
	padding: 0 20rpx;
}




.money_price-bubble {
	height: 140rpx;
	width: 140rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	background: radial-gradient(circle at 30% 30%,
			rgba(255, 255, 255, 1) 0%,
			rgba(255, 255, 255, 0.9) 50%,
			rgba(255, 255, 255, 0.8) 100%);
	border-radius: 50%;
	font-size: 28rpx;
	color: #333;
	cursor: pointer;
	margin: 0 auto;
	padding: 10rpx;
	transform-style: preserve-3d;
	perspective: 1000rpx;
	transition: all 0.3s ease;
	box-shadow:
		inset -8rpx -8rpx 12rpx rgba(0, 0, 0, 0.1),
		inset 8rpx 8rpx 12rpx rgba(255, 255, 255, 0.8),
		4rpx 4rpx 15rpx rgba(0, 0, 0, 0.15);
	-webkit-tap-highlight-color: transparent;
	user-select: none;

	text {
		text-align: center;
		width: 100%;
		line-height: 1.2;
		word-break: break-word;
		padding: 0 8rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	&:active {
		background: radial-gradient(circle at 30% 30%,
				rgba(255, 255, 255, 0.9) 0%,
				rgba(255, 255, 255, 0.8) 50%,
				rgba(255, 255, 255, 0.7) 100%);
		transform: scale(0.98);
	}
}

.money_price-active {
	background: radial-gradient(circle at 30% 30%,
			#fbeee5 0%,
			#F39800 60%,
			#F39800 100%) !important;
	color: #ffffff;
	transform: translateZ(30rpx) scale(1.05);
	box-shadow:
		inset -8rpx -8rpx 12rpx rgba(0, 0, 0, 0.2),
		inset 8rpx 8rpx 12rpx rgba(255, 255, 255, 0.1),
		4rpx 4rpx 15rpx rgba(230, 118, 36, 0.4);
	text-shadow: 1rpx 1rpx 2rpx rgba(0, 0, 0, 0.2);

	// 添加脉冲动画
	animation: pulse 2s infinite;
}

// 加脉冲动画
@keyframes pulse {
	0% {
		transform: translateZ(30rpx) scale(1.05);
	}

	50% {
		transform: translateZ(40rpx) scale(1.08);
	}

	100% {
		transform: translateZ(30rpx) scale(1.05);
	}
}

// 优化价格容器
.money_price-bubbles {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 30rpx;
	padding: 0 20rpx;
	perspective: 1000rpx; // 为整个容器添加透视效果
}

// 优化标题
//   .money_price-title {
//     text-align: center;
//     font-size: 48rpx;
//     color: #e67624;
//     font-weight: bold;
//     margin-bottom: 40rpx;
//     text-shadow: 2rpx 2rpx 4rpx rgba(0, 0, 0, 0.1);
//     transform: translateZ(20rpx);
//   }

.move_scroll-container {
	width: 100%;
	overflow: hidden;
	background-color: #f4dcc8;
	position: relative;
}

.move_category-row {
	display: flex;
	padding: 20rpx 0;
	gap: 30rpx;
	padding-left: 10px;

	&.animate {
		animation: scrolling 20s linear infinite;
	}
}

@keyframes scrolling {
	0% {
		transform: translateX(0);
	}

	100% {
		transform: translateX(-50%);
	}
}
</style>
